<template>
  <div>
    <h1>zhao文武测试</h1>
    <div class="box" v-if="hiddenBox">
    <el-link type="danger">退出登录</el-link>
    <div class="box" @click="changeMsg">
      <div class="left">{{ msg }}</div>
      <div class="center" @click="antiShake">{{ c }}</div>
      <div class="right">{{ msg }}</div>

    </div>
    <div v-for="(i, index) in list" :key="index" class="listBox" />
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a :to="{ path: '/practice'}">练习页面</a></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/salarys'}">工资详情</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/permission'}">权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" justify="space-between">
      <el-col :span="3"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
    </el-row>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
  <el-button type="primary" size="default" @click="throttle">节流赵文武</el-button>
  
   
    <el-button class="btn" type="primary" @click="changeShow">表单 </el-button>
    <br>
    <CardForm v-if="isShow" />
    <!-- 选择器 -->
    <el-select style="margin: 20px" v-model="value"  placeholder="请选择人物" clearable filterable @change="changeName">
      <el-option v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    
  </div>

</template>

<script>

export default {
  components: {
    CardForm: () => import('./compoents/cardForm')
  },
  data() {
    return {
      tag: false,
      hiddenBox: false,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      value: '',
      timer1: null,
      // handler: null,
      isShow: false,
      msg: 'hahaha',
      list: [1, 2, 3, 4, 5, 6, 7, 8]

    }
  },
  created () {
    this.c = '响应式'
    // this.handler = setInterval(() => {
    //   console.log(123)
    // },500)
  },
  beforeDestroy () {
    // window.clearInterval(this.handler);
  },
  methods: {
    changeName () {
      console.log(456)
    },
    // 防抖
    antiShake() {
      
      window.clearTimeout(this.timer1)
       this.timer1 = setTimeout(() => {
        console.log(123)
      },500)
    },
    // 节流
    throttle() {
     this.tag = true
      if(this.tag) {
        this.tag = false
        setTimeout(() => {
          console.log(123)
          this.tag = true
        }, 500);
      }
    },
    changeMsg() {
      this.msg = '好好学习，天天向上'
      if (!this.msg) {
        this.msg = 'xixixi'
      }
    },
    changeShow() {
      this.isShow = !this.isShow
    }
  }
}

</script>

<style lang="scss" scoped>
.btn {
  margin: 20px 200px;
}
.fixed-header+.app-main {
    padding-top: 30px;
}
.box {
  display: flex;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  justify-content: space-between;
  border: 1px solid #000;
}
.listBox {
  width: 100%;
  height: 22px;
  margin-bottom: 5px;
  background-color: pink;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
